import React, { Component } from 'react'
import { CSSTransition, SwitchTransition } from 'react-transition-group'
import './Transition2.css'

export default class Transition2 extends Component {
  constructor() {
    super();
    this.state = {
      isShow: true
    }
  }
  render() {
    return (
      <div>
        {/* mode:切换模式，先进后出还是先出后进 */}
        <SwitchTransition mode="out-in">
          {/* key：元素的显示状态 */}
          <CSSTransition
            classNames="fade"
            key={this.state.isShow}
            addEndListener={(node, done) => {
              node.addEventListener("transitionend", done, false);
            }}
          >
            <button onClick={() => this.setState({ isShow: !this.state.isShow })}>{this.state.isShow ? 'hide' : 'show'}</button>
          </CSSTransition>
        </SwitchTransition>
      </div>
    )
  }
}
